<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业1</title>
    <style type="text/css">
        div{
            margin-top: 10px;
        }
        #box1{
            width: 100px;
            height: 100px;
            background: url("img/tx.jpg") no-repeat;
            border-radius: 50%;
        }
        #box2{
            width: 60px;
            height: 40px;
            background: deepskyblue;
            color: white;
            text-align: center;
            line-height: 40px;
            border-radius: 10px ;
        }
        #box3{
            width: 60px;
            height: 40px;
            background: deepskyblue;
            color: white;
            text-align: center;
            line-height: 40px;
            border-radius: 0 10px 10px 0 ;
        }
        #inner{
            width: 5px;
            height: 20px;
            background: darkgray;
            border: 1px solid dimgray;
            border-radius: 5px 0 0 5px ;
        }
        #outer{
            width: 5px;
            height: 20px;
            background: darkgray;
            border: 1px solid dimgray;
            border-radius: 0 5px 5px 0;
        }
        #box4 p{
            float: left;
            margin-right: 10px;
        }
        #box5{
            clear: both;
            width: 100px;
            height: 80px;
            color: white;
            background: forestgreen;
            box-shadow: 10px 8px 5px dimgray;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2">圆角</div>
    <div id="box3">圆角</div>
    <div id="box4">
        <p id="inner"></p>
        <p>边框背景</p>
        <p id="outer"></p>
    </div>
    <div id="box5">盒子阴影</div>
</body>
</html>